/* 渲染页面 */
//大标题
const Title = document.getElementById("contentTitle")
//描述
const Describe = document.getElementById("contentDescribe")
//各项内容
const subclass = document.querySelector(".content .content-sub")

function userInput_Render() {
	Title.innerHTML = "userInput"
	Describe.innerHTML = "对原生prompt方法进行各项文字的输入限制"
	subclass.innerHTML = `
    <div class="content-subclass">
        <h3><span class="subclass-term">方法名</span>userInput.Null()</h3>
        <h4><span class="subclass-term">描述</span>当用户输入空字符串时，会进行alert弹窗警告</h4>
        <h4><span class="subclass-term">参数</span>
            <div>
                <p class="formalParameter">形参一：promptInfo</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：输入框提示文字</p>
                <p class="formalParameter">形参二：errInfoNull</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：空输入警告文字，会使用alert弹出</p>
            </div>
        </h4>
        <h4><span class="subclass-term">返回</span>
            <div>
                <p class="formalParameter">字符串类型，用户的输入内容</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数参数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">示例</span>
            <div>
                <p class="formalParameter">const user = userInput.Null("请输入","您的输入为空")</p>
                <p class="formalParameter">console.log(user)</p>
            </div>
        </h4>
    </div>
    `
	subclass.innerHTML += `
    <div class="content-subclass">
        <h3><span class="subclass-term">方法名</span>userInput.ArrLimit()</h3>
        <h4><span class="subclass-term">描述</span>仅可以输入给定的数组内容，用户的输入不是数组中的某一项时，会进行alert弹窗警告</h4>
        <h4><span class="subclass-term">参数</span>
            <div>
                <p class="formalParameter">形参一：arr</p>
                <p class="formalParameterType">类型：数组</p>
                <p class="formalParameterText">说明：存放限定内容的数组</p>
                <p class="formalParameter">形参二：promptInfo</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：输入框提示文字</p>
                <p class="formalParameter">形参三：errQualifiedInfo</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：输入字符非数组内容警告文字，会使用alert弹出</p>
                <p class="formalParameter">形参四：errInfoNull</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：空输入警告文字，会使用alert弹出</p>
            </div>
        </h4>
        <h4><span class="subclass-term">返回</span>
            <div>
                <p class="formalParameter">字符串类型，用户的输入内容</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数参数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">示例</span>
            <div>
                <p class="formalParameter">const user = ArrLimit.Null([12,23,34,45],"请输入","您的输入与数据不匹配","您的输入为空")</p>
                <p class="formalParameter">console.log(user)</p>
            </div>
        </h4>
    </div>
    `
	subclass.innerHTML += `
    <div class="content-subclass">
        <h3><span class="subclass-term">方法名</span>userInput.Number()</h3>
        <h4><span class="subclass-term">描述</span>仅允许输入数字，用户的输入不是数字时，会进行alert弹窗警告</h4>
        <h4><span class="subclass-term">参数</span>
            <div>
                <p class="formalParameter">形参一：promptInfo</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：输入框提示文字</p>
                <p class="formalParameter">形参二：errInfoNaN</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：非数字警告文字，会使用alert弹出</p>
                <p class="formalParameter">形参三：errInfoNull</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：空输入警告文字，会使用alert弹出</p>
            </div>
        </h4>
        <h4><span class="subclass-term">返回</span>
            <div>
                <p class="formalParameter">数字类型，用户的输入内容，自动转为数字</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数参数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">示例</span>
            <div>
                <p class="formalParameter">const user = userInput.Number("请输入","您输入的不是数字","您的输入为空")</p>
                <p class="formalParameter">console.log(user)</p>
            </div>
        </h4>
    </div>
    `
	subclass.innerHTML += `
    <div class="content-subclass">
        <h3><span class="subclass-term">方法名</span>userInput.NumberScope()</h3>
        <h4><span class="subclass-term">描述</span>仅允许输入限定范围的数字，用户的输入不是数字时以及不是范围内的数字时，会进行alert弹窗警告</h4>
        <h4><span class="subclass-term">参数</span>
            <div>
                <p class="formalParameter">形参一：min</p>
                <p class="formalParameterType">类型：数字</p>
                <p class="formalParameterText">说明：数字范围下限</p>
                <p class="formalParameter">形参二：max</p>
                <p class="formalParameterType">类型：数字</p>
                <p class="formalParameterText">说明：数字范围上限</p>
                <p class="formalParameter">形参三：promptInfo</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：输入框提示文字</p>
                <p class="formalParameter">形参四：errScopeInfo</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：非范围内数字警告文字，会使用alert弹出</p>
                <p class="formalParameter">形参五：errInfoNaN</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：非数字警告文字，会使用alert弹出</p>
                <p class="formalParameter">形参六：errInfoNull</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：空输入警告文字，会使用alert弹出</p>
            </div>
        </h4>
        <h4><span class="subclass-term">返回</span>
            <div>
                <p class="formalParameter">数字类型，用户的输入内容，自动转为数字</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数参数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">示例</span>
            <div>
                <p class="formalParameter">const user = userInput.NumberScope("请输入","您的输入为空")</p>
                <p class="formalParameter">console.log(user)</p>
            </div>
        </h4>
    </div>
    `
}

function simplify_Render() {
	Title.innerHTML = "方法简写"
	Describe.innerHTML = "对部分原生JS方法进行简写"
	subclass.innerHTML = `
    <div class="content-subclass">
        <h3><span class="subclass-term">方法名</span>log()</h3>
        <h4><span class="subclass-term">描述</span>简化console.log方法</h4>
        <h4><span class="subclass-term">参数</span>
            <div>
                <p class="formalParameter">logMsg</p>
                <p class="formalParameterText">说明：控制台输出信息</p>
            </div>
        </h4>
        <h4><span class="subclass-term">返回</span>
            <div>
                <p class="formalParameter">undefined</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数参数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">示例</span>
            <div>
                <p class="formalParameter">log("Hello!")</p>
            </div>
        </h4>
    </div>
    `
	subclass.innerHTML += `
    <div class="content-subclass">
        <h3><span class="subclass-term">方法名</span>dir()</h3>
        <h4><span class="subclass-term">描述</span>简化console.dir方法</h4>
        <h4><span class="subclass-term">参数</span>
            <div>
                <p class="formalParameter">dirMsg</p>
                <p class="formalParameterText">说明：控制台输出信息</p>
            </div>
        </h4>
        <h4><span class="subclass-term">返回</span>
            <div>
                <p class="formalParameter">undefined</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数参数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">示例</span>
            <div>
                <p class="formalParameter">dir("Hello!")</p>
            </div>
        </h4>
    </div>
    `
	subclass.innerHTML += `
    <div class="content-subclass">
        <h3><span class="subclass-term">方法名</span>err()</h3>
        <h4><span class="subclass-term">描述</span>简化console.error方法</h4>
        <h4><span class="subclass-term">参数</span>
            <div>
                <p class="formalParameter">errMsg</p>
                <p class="formalParameterText">说明：控制台输出信息</p>
            </div>
        </h4>
        <h4><span class="subclass-term">返回</span>
            <div>
                <p class="formalParameter">undefined</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数参数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">示例</span>
            <div>
                <p class="formalParameter">err("Hello!")</p>
            </div>
        </h4>
    </div>
    `
	subclass.innerHTML += `
    <div class="content-subclass">
        <h3><span class="subclass-term">方法名</span>dq()</h3>
        <h4><span class="subclass-term">描述</span>简化document.querySelector方法</h4>
        <h4><span class="subclass-term">参数</span>
            <div>
                <p class="formalParameter">element</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：CSS选择器</p>
            </div>
        </h4>
        <h4><span class="subclass-term">返回</span>
            <div>
                <p class="formalParameter">element</p>
                <p class="formalParameterType">类型：元素</p>
                <p class="formalParameterText">说明：该选择器所指向的元素对象</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数参数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">示例</span>
            <div>
                <p class="formalParameter">dq("div ul li")</p>
            </div>
        </h4>
    </div>
    `
	subclass.innerHTML += `
    <div class="content-subclass">
        <h3><span class="subclass-term">方法名</span>dqa()</h3>
        <h4><span class="subclass-term">描述</span>简化document.querySelectorAll方法</h4>
        <h4><span class="subclass-term">参数</span>
            <div>
                <p class="formalParameter">elements</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：CSS选择器</p>
            </div>
        </h4>
        <h4><span class="subclass-term">返回</span>
            <div>
                <p class="formalParameter">elements</p>
                <p class="formalParameterType">类型：元素伪数组</p>
                <p class="formalParameterText">说明：该选择器所指向的元素对象伪数组</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数参数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">示例</span>
            <div>
                <p class="formalParameter">dqa("div ul li")</p>
            </div>
        </h4>
    </div>
    `
}

function Log_Render() {
	Title.innerHTML = "Log"
	Describe.innerHTML = "功能性输出与控制台重构，对console.log方法进行常规输出操作。或者重构控制台，将控制台移动到页面上"
	subclass.innerHTML = `
    <div class="content-subclass">
        <h3><span class="subclass-term">方法名</span>Log.Line()</h3>
        <h4><span class="subclass-term">描述</span>将数组内容依次打印在控制台</h4>
        <h4><span class="subclass-term">参数</span>
            <div>
                <p class="formalParameter">arr</p>
                <p class="formalParameterType">类型：数组</p>
                <p class="formalParameterText">说明：需要依次将每个数据打印到控制台的数组</p>
            </div>
        </h4>
        <h4><span class="subclass-term">返回</span>
            <div>
                <p class="formalParameter">undefined</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数参数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">示例</span>
            <div>
                <p class="formalParameter">Log.Line([1,2,3,4,5])</p>
            </div>
        </h4>
    </div>
    `
	subclass.innerHTML += `
    <div class="content-subclass">
        <h3><span class="subclass-term">方法名</span>Log.Color()</h3>
        <h4><span class="subclass-term">描述</span>打印指定颜色与背景色的内容到控制台</h4>
        <h4><span class="subclass-term">参数</span>
            <div>
                <p class="formalParameter">形参一：info</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：需要打印的内容</p>
                <p class="formalParameter">形参二：color</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：字体颜色，可以使用ES6能够解析的颜色形式，包括关键字、十六进制、rgb或rgba等</p>
                <p class="formalParameter">形参三：backgroundColor</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：背景颜色，可以使用ES6能够解析的颜色形式，包括关键字、十六进制、rgb或rgba等</p>
            </div>
        </h4>
        <h4><span class="subclass-term">返回</span>
            <div>
                <p class="formalParameter">undefined</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数参数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">示例</span>
            <div>
                <p class="formalParameter">Log.Color("Hello","red","#000000")</p>
            </div>
        </h4>
    </div>
    `
	subclass.innerHTML += `
    <div class="content-subclass">
        <h3><span class="subclass-term">方法名</span>Log.Float()</h3>
        <h4><span class="subclass-term">描述</span>浮窗型控制台，将控制台移动到页面上</h4>
        <h4><span class="subclass-term">参数</span>
            <div>
                <p class="formalParameter">msg</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：(可选)需要打印的内容，相当于console.log</p>
            </div>
        </h4>
        <h4><span class="subclass-term">返回</span>
            <div>
                <p class="formalParameter">undefined</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数参数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">具体说明</span>
            <div>
                <p class="formalParameter">浮窗控制台可以随意拖动</p>
                <p class="formalParameter">左上角可以小化浮窗控制台，右上角可清空浮窗控制台内容</p>
                <p class="formalParameter">与原有控制台一样，具有直接编辑基础JS代码功能，原理是eval</p>
                <p class="formalParameter">展示对象或数组时，只显示第一层，需要查看下一层，请在代码中直接打印下一层的对象或数组</p>
                <p class="formalParameter">对异常情况进行捕获并重构格式，给出中文提示和说明</p>
                <p class="formalParameter">请求异常会帮助分析状态码</p>
                <p class="formalParameter">其他异常会翻译异常类型，点击异常信息时，会自动百度该异常</p>
                <p class="formalParameter">展示不同的数据类型，具有不同的颜色</p>
            </div>
        </h4>
        <h4><span class="subclass-term">示例</span>
            <div>
                <p class="formalParameter">Log.Float()</p>
                <p class="formalParameter">Log.Float("Hello!")</p>
            </div>
        </h4>
    </div>
    `
}

function formatSecond_Render() {
	Title.innerHTML = "formatSecond()"
	Describe.innerHTML = "秒数格式化，根据输入秒数，转化为年月日时分秒格式，如果某一项为零则不打印"
	subclass.innerHTML = `
    <div class="content-subclass">
        <h4><span class="subclass-term">参数</span>
            <div>
                <p class="formalParameter">形参一：second</p>
                <p class="formalParameterType">类型：数字</p>
                <p class="formalParameterText">说明：需要转换的秒数</p>
                <p class="formalParameter">形参二：separatorYMD</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：年月日分隔符，默认为斜线/</p>
                <p class="formalParameter">形参三：separatorDH</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：日与时的分隔符，默认为空格</p>
                <p class="formalParameter">形参四：separatorHMS</p>
                <p class="formalParameterType">类型：字符串</p>
                <p class="formalParameterText">说明：时分秒分隔符，默认为冒号:</p>
            </div>
        </h4>
        <h4><span class="subclass-term">返回</span>
            <div>
                <p class="formalParameter">格式化后的字符串</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">回调函数参数</span>
            <div>
                <p class="formalParameter">无</p>
            </div>
        </h4>
        <h4><span class="subclass-term">示例</span>
            <div>
                <p class="formalParameter">const str = formatSecond(65481)</p>
                <p class="formalParameter">const str = formatSecond(65481,"-"," ",":")</p>
            </div>
        </h4>
    </div>
    `
}
